<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="php,ajax" />
<meta name="description" content="Helloweba演示平台，演示XHTML、CSS、jquery、PHP案例和示例" />
<title>演示：jQuery滑动解锁</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<link rel="stylesheet" type="text/css" href="assets/less/unlock.css">
<style>

.bar {
    margin: 20px;
    height: 40px;
    width: 300px;
}
</style>
</head>
<body>
<div class="container">

	<h2>jQuery滑动解锁</h2>

	<div class="row" style="margin-top: 30px">

		<div class="bar1 bar"></div>
		<div class="bar2 bar"></div>
		<div class="bar3 bar"></div>
		<div class="bar4 bar"></div>
		<div class="bar5 bar"></div>
	</div>

</div>


<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
<script src='assets/js/unlock.js'></script>
<script type="text/javascript">
    $('.bar1').slideToUnlock();
    $('.bar2').slideToUnlock({
        height : 50,
        width : 200,
    });
    $('.bar3').slideToUnlock({
        text : '未解锁的文字',
        succText : '解锁成功的文字'
    });
    $('.bar4').slideToUnlock({
        bgColor : '#fce',
        progressColor : '#f60',
        succColor : '#f00',
        textColor : '#fff',
        succTextColor : '#fff',
    });
</script>
</body>
</html>